<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>music</title>
		<link rel="stylesheet" href="./css/music.css">
		<link rel="stylesheet" href="./css/bootstrap.css">
		<script src="./js/jquery-3.4.1.min.js"></script>
		<script src="./js/bootstrap.js"></script>
	</head>
	<body>
		<!--********导航开始***********-->
		<header class="header">
			<div class="header_center">
				<div class="logo">
				</div>
			<div class="nav">
				<ul>
					<li><a href="./apple.html">Mac</a></li>
					<li><a href="#javascript:;">ipad</a></li>
					<li><a href="#javascript:;">iphone</a></li>
					<li><a href="#javascript:;">Watch</a></li>
					<li><a href="#javascript:;">TV</a></li>
					<li><a href="#javascript:;">Music</a></li>
					<li><a href="./support.html">Support</a></li>
				</ul>
			</div>
			<div class="logo1">
				<img src="./img/guowu.svg"/>
			</div>
			<div class="logo2">
				<img src="./img/wenhao.svg">
					
					<div class="xiala">
						<div class="xia1">
							<ul id="nav_two">
								<li><a href="javascript:;">Your Bag is empty.</a></li>
								<li><a href="javascript:;"><img src="./img/bag.svg" alt="" />Bag</a></li>
								<li><a href="javascript:;"><img src="./img/favorites.svg" alt="" />Favorite</a></li>
								<li><a href="javascript:;"><img src="./img/orders.svg" alt="" />Ordes</a></li>
								<li><a href="javascript:;"><img src="./img/account.svg" alt="" />Account</a></li>
								<li><a href="javascript:;"><img src="./img/signIn.svg" alt="" />Sign in</a></li>
							</ul>	
						</div>
					</div>
			</div>
		</div>
		<!--*********导航结束*********-->
		<!--***********紫色背景************-->
			<div class="bei">
				<div class="container able">
					<div class="row text-center">
						<div class="fan">
							<img src="./img/music.svg"/>
							<p class="ios"><a href="#javascript:;">Apple Music</a></p>
						</div>
						<div class="fan">
							<img src="./img/AirPods.svg"/>
							<p class="ios"><a href="#javascript:;">AirPodsPro<br />new</a></p>
						</div>
						<div class="fan">
							<img src="./img/Airpods1.svg"/>
							<p class="ios"><a href="#javascript:;">AirPods</a></p>
						</div>
						<div class="fan">
							<img src="./img/yinxian.svg"/>
							<p class="ios"><a href="#javascript:;">HomePod</a></p>
						</div>
						<div class="fan">
							<img src="./img/iphone.svg"/>
							<p class="ios"><a href="#javascript:;">iPod touch</a></p>
						</div>
						<div class="fan">
							<img src="./img/erji.svg"/>
							<p class="ios"><a href="#javascript:;">Music Accessories</a></p>
						</div>
						<div class="fan">
							<img src="img/apples.svg"/>
							<p class="ios"><a href="#javascript:;">Gift Cards</a></p>
						</div>
					</div>
				</div>
				<div class="lino">
					<div class="lino_nav">
						<p>Free 2-hour delivery on select Apple products in most metros. See checkout for delivery dates.</p>
					</div>
				</div>
				<div class="container table">
						<div class="row pinl">
							<div class="col-md-6">
								<h1 class="gg"></h1>
								<p>Lose yourself in<br /> 60 million songs.</p>
								<div class="hh">
									<span class="hh_nad">
										<a href="#javascript:;">Try it free*</a>
									</span>
									<p>Learn more</p><span class="t"> > </span> 
								</div>
							</div>
							<div class="col-md-6">
								<figure class="tupian"></figure>
							</div>
						</div>
					</div>
			</div>
			
		<!--***********紫色背景结束********-->
		<!--**************点击试图片转换开始*********-->
		<div class="uster">
			<ul class="nav nav-tabs" id="myTab" role="tablist">
				<li class="nav-item">
				  <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home">You Gotta Hear</a>
				</li>
				<li class="nav-item">
				  <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile">Sounds for the Season</a>
				</li>
				<li class="nav-item">
				  <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" >Daily Top 100</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" id="contact-tab" data-toggle="tab" href="#four">Just Updated</a>
					</li>
				<li class="nav-item">
					<a class="nav-link" id="contact-tab" data-toggle="tab" href="#five">New Music</a>
					</li>
			  </ul>
			  <div class="tab-content lunbo" id="myTabContent">
				<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
					<img src="./img/lunbo_1.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo_2.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo_3.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo_4.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo_5.jpeg" width="180" height="180" alt="">
				</div>
				<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
					<img src="./img/lunbo6.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo7.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo8.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo9.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo10.jpeg" width="180" height="180" alt="">
				</div>
				<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
					<img src="./img/lunbo11.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo12.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo13.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo14.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo15.jpeg" width="180" height="180" alt="">
				</div>
				<div class="tab-pane fade" id="four" role="tabpanel" aria-labelledby="contact-tab">
					<img src="./img/lunbo16.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo17.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo18.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo19.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo20.jpeg" width="180" height="180" alt="">
				</div>
				<div class="tab-pane fade" id="five" role="tabpanel" aria-labelledby="contact-tab">
					<img src="./img/lunbo21.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo22.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo23.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo24.jpeg" width="180" height="180" alt="">
					<img src="./img/lunbo25.jpeg" width="180" height="180" alt="">
				</div>
			  </div>
		</div>
		<!--**************点击试图片转换结束*********-->
		<!--******************Airspods第三代开始***********-->
		<div class="gbg">
			<div class="container tester">
				<div class="row">
					<div class="col-md-6">
						<h2>AirPods&nbsp;Pro</h2>
						<p>Magic like you’ve<br /> never heard.</p>
						<a href="#javascript:;">Learn more</a><span> > </span>
						<a href="#javascript:;">Buy</a><span> > </span>
					</div>
					<div class="col-md-6">	
						<figure class="air"></figure>
					</div>
				</div>
			</div>
		</div>
		<!--*********************Airspods第三代结束********************-->
		<!--***************苹果logo图片旋转开始*****************-->
		<section class="banner">
			<div class="banner_body">	
				<div class="banner_top">
					<div class="banner_center">
						<img src="img/black-friday-landing-header-201911.png">
					</div>
				</div>
					<h2>Make someone’s holiday.</h2>
					<p><a href="#" class="e">Shop gifts</a><a><span class="d"><strong>></strong></span></a></p>
				<div class="banner_left">
					<a href="#">
						<ul>
							<li><img src="img/ipone11.PNG" alt="" /></li>
							<li><img src="img/apple watch.PNG" alt="" /></li>
							<li><img src="img/ipone11pro.PNG" alt="" /></li>
						</ul>
					</a>
				</div>
			</div>	
		</section>	
		<!--***********苹果logo图片旋转结束*********************-->
		<!--***************购物开始*********************-->
		<!--第一个开始-->
		<div class="container feater">
			<div class="row">
				<div class="col-md-6 da">
					<h2>AirPods</h2>
					<p>Wireless. Effortless.<br /> Magical.</p>
					<a href="#javascript:;">Learn more</a><span> > </span>
					<a href="#javascript:;">Buy</a><span> > </span>
				</div>
				<div class="col-md-6 fa">
					<h2>HomePod</h2>
					<p>The new sound<br /> of home.</p>
					<a href="#javascript:;">Learn more</a><span> > </span>
					<a href="#javascript:;">Buy</a><span> > </span>
				</div>
			</div>
		</div>
		<!--第一个结束-->
		<!--第二个开始-->
		<div class="container tuseter">
			<div class="row">
				<div class="col-md-6">
					<figure class="tu1"></figure>
				</div>
				<div class="col-md-6">
					<figure class="tu2"></figure>
				</div>
			</div>
		</div>		
		<!--第二个结束-->
		<!--第三个开始-->
		<div class="container beater">
			<div class="row">
				<div class="col-md-6 ta">
					<h2>iPod touch</h2>
					<p>The music you love.<br /> On the go.</p>
					<a href="#javascript:;">Learn more</a><span> > </span>
					<a href="#javascript:;">Buy</a><span> > </span>
				</div>
				<div class="col-md-6 ja">
					<h2>Accessories</h2>
					<p>Listen with<br /> a new look.</p>
					<a href="#javascript:;">Shop headphones and speakers</a><span> > </span>
					
				</div>
			</div>
		</div>
		<!--第三个结束-->
		<!--第四个开始-->
		<div class="container oseder">
			<div class="row">
				<div class="col-md-6">
					<figure class="tu3"></figure>
				</div>
				<div class="col-md-6">
					<figure class="tu4"></figure>
				</div>
			</div>
		</div>		
		<!--第四个结束-->
		<!--*******************购物结束*********************-->
		<!--*************Music creation apps from Apple.开始*********-->
		<div class="music">
			<div class="music_nav">
				<h2>Music creation<br /> apps&nbsp;from&nbsp;Apple.</h2>
			</div>
			<div class="music_left">
				<figure class="yueqi"></figure>
			</div>
			<div class="container heater">
				<div class="row">
					<div class="col-md-3 re">
						<figure></figure>
						<h3>Music Memos</h3>
						<a href="#javascript:;">Learn more</a><span> > </span>
					</div>
					<div class="col-md-3 us">
						<figure></figure>
						<h3>GarageBand</h3>
						<a href="#javascript:;">Learn more</a><span> > </span>
					</div>
					<div class="col-md-3 qq">
						<figure></figure>
						<h3>Logic Pro X</h3>
						<a href="#javascript:;">Learn more</a><span> > </span>
					</div>
					<div class="col-md-3 oo">
						<figure></figure>
						<h3>MainStage 3</h3>
						<a href="#javascript:;">Learn more</a><span> > </span>
					</div>
				</div>
			</div>
		</div>
		<!--*****************Music creation apps from Apple.结束*********-->
		<!--**********************music音乐开始**********************-->
		<div class="container place">
			<div class="row">
				<div class="col-md-4">
					<p> > music</p>
				</div>
			</div>
		</div>
		<div class="container jest">
				
			<div class="row">
			
				<div class="col-md-3">
					<h3>Get Support</h3><br />
					<a href="javascript:;">iphone</a><br />
					<a href="javascript:;">ipad</a><br />
					<a href="javascript:;">Watch</a><br />
					<a href="javascript:;">Mac</a><br />
					<a href="javascript:;">Music</a><br />
					<a href="javascript:;">Apple ID</a><br />
					<a href="javascript:;">Apps</a><br />
					<a href="javascript:;">Support Site Map</a><br />
				</div>
				<div class="col-md-3">
					<h3>Service &Repair</h3><br />
					<a href="javascript:;">Apple Repair Options</a><br />
					<a href="javascript:;">Service and Repair Information</a><br />
					<a href="javascript:;">AppleCare Products</a><br />
					<a href="javascript:;">Hardware Warranties</a><br />
					<a href="javascript:;">Software License Agreements</a><br />
					<a href="javascript:;">Complimentary Support</a><br />
				</div>
				<div class="col-md-3">
					<h3>Resources</h3><br />
					<a href="javascript:;">Downloads & Updates</a><br />
					<a href="javascript:;">Manuals</a><br />
					<a href="javascript:;">Tech Specs</a><br />
					<a href="javascript:;">Accessibility</a><br />
					<a href="javascript:;">Education Program</a><br />
					<a href="javascript:;">Business</a><br />
					<a href="javascript:;">Apple Support Videos</a><br />
				</div>
				<div class="col-md-3">
					<h3>Connect</h3><br />
					<a href="javascript:;">Contact Us</a><br />
					<a href="javascript:;">Phone Numbers</a><br />
					<a href="javascript:;">My Support</a><br />
					<a href="javascript:;">Apple Support App</a><br />
					<a href="javascript:;">@Apple Support</a><br />
				</div>
			</div>
		</div>
		<div class="hread">
			
		</div>
		
		
		<footer class="footer">
			<div class="footer_nav">
				Copyright © 2019 Apple Inc. All rights reserved.
			</div>
			<div class="footer_left">
				<a href="javascript:;">Privacy Policy</a>
				<a href="javascript:;">Terms of Use</a>
				<a href="javascript:;">Sales and Refunds</a>
				<a href="javascript:;">Site Map</a>
			</div>
			<div class="footer_right">
				<a href="javascript:;"><img src="./img/us.png"/>United States</a>
			</div>
		</footer>
		
		
		
		
		<!--/*************************music音乐结束**********************-->
		
	</body>
	
</html>
